<template>
  <div>
    <van-nav-bar title="黑马头条-登录" />

    <van-form @submit="onSubmitFn">
      <van-field v-model="mobile" name="mobile" required label="手机号码" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' },
      {pattern:/^1[3-9]\d{9}$/,message:'请输入合法手机号'}]" />
      <van-field v-model="code" type="password" name="code" required label="登录密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' },
      {pattern:/^\d{6}$/,message:'请输入合法密码'}]" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" :loading="isLoding" :disabled="isLoding" loading-text="程序员拼命加载ing...">提交</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { MyNotify } from '@/utils/Notify.js'
// import { loginAPI } from '@/api/login.js'
export default {
  name: 'Login',
  data() {
    return {
      mobile: '13800008888', // 手机号随便写
      code: '246810', // 密码是固定的
      isLoding: false
    }
  },
  methods: {
    // actions的返回值是一个promiss函数
    ...mapActions(['asyncLoginAction']),
    async onSubmitFn(value) {
      // this.isLoading = true
      try {
        this.isLoading = true
        console.log(value)
        const reqs = await this.asyncLoginAction(value)
        console.log(reqs)
        MyNotify({ type: 'success', message: '登录成功' })
        // 获取login路由地址中携带的之前的页面地址
        const tPath = this.$route.query.path
        console.log(this.$route)
        this.$router.replace({
          path: tPath || '/layout'
        })
      } catch (err) {
        console.log('出错了')
        MyNotify({ type: 'warning', message: '手机号或密码错误' })
        // this.isLoading = false
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
// .van-nav-bar {
//   background: #007bff;
//   /deep/ .van-nav-bar__title {
//     color: white;
//   }
// }
</style>
